
import TinyReact from './TinyReact'

const root = document.querySelector('#root')

const vdom = (
  <div className="container">
    {/* 文本节点也需要被转化成一个VDOM对象 */}
    <div>haha</div>
    {/* 当条件为false的时候，不渲染DOM，也不渲染VDOM */}
    { 2 === 1 && <div>相等才渲染</div>}
    { 1 === 1 && <div>渲染我</div>}
    <button onClick={() => {console.log('888')}}>点我</button>
    <div>
      <input type="text" value="111"></input>
    </div>
    <h4>我的类型会变</h4>
    <div>我要被删了啊啊啊啊</div>
  </div>
)

const modifyDom = (
  <div className="container">
    {/* 文本节点变化 */}
    <div>hahahah我变了</div>
    {/* 当条件为false的时候，不渲染DOM，也不渲染VDOM */}
    { 2 === 1 && <div>相等才渲染</div>}
    { 1 === 1 && <div>渲染我</div>}
    <button onClick={() => {console.log('666')}}>点我</button>
    <div>
      <input type="text" value="1341"></input>
    </div>
    <h2>我的类型变了</h2>
  </div>
)

function Demo() {
  return (
    <div>Hello</div>
  )
}

function Heart (props) {
  return (
    <div>
      {props.title}
      &hearts;
      <Demo />
    </div>
  )
}

class Hello extends TinyReact.Component {

  constructor(props) {
    super(props)
    this.state = {
      title: 'im title'
    }
    this.changeTitle = this.changeTitle.bind(this)
  }

  changeTitle() {
    this.setState({
      title: 'changed title'
    })
  }
  
  render() {
    return (
      <div>
        {this.props.name}
        {this.props.age}
        {this.state.title}
        <button onClick={this.changeTitle}>click me</button>
      </div>
    )
  }
}

class DemoRef extends TinyReact.Component {
  constructor(props) {
    super(props)
    this.handleClick = this.handleClick.bind(this)
  }

  handleClick() {
    console.log(this.input.value)
    console.log(this.comp)
  }

  render() {
    return (
      <div>
        <input type="text" ref={input => {this.input = input}}></input>
        <button onClick={this.handleClick}>点我</button>
        <Hello title="123" ref={comp => {this.comp = comp}} />
      </div>
    )
  }
}

class KeyDemo extends TinyReact.Component {
  constructor(props) {
    super(props)
    this.state = {
      person: [
        {
          id: 1,
          name: 'xddx'
        },
        {
          id: 2,
          name: 'pengbo'
        },
        {
          id: 3,
          name: 'sqing'
        }
      ]
    }
    this.change = this.change.bind(this)
  }

  change() {
    let person = JSON.parse(JSON.stringify(this.state.person))
    // person.push(person.shift())
    // person.splice(1, 0, {id: 5, name: 'wbp'})
    person.pop()
    this.setState({
      person: person
    })
  }

  render() {
    return (
      <div>
        <ul>
          {
            this.state.person.map(person => <li key={person.id}>
              {person.name}
            </li>)
          }
        </ul>
        <button onClick={this.change}>修改顺序</button>
      </div>
    )
  }
}

TinyReact.render(<KeyDemo />, root)

// TinyReact.render(<DemoRef />, root)

// TinyReact.render(<Hello name="xixi" age={20} />, document.querySelector('#root'))
// TinyReact.render(<Heart title="ahahaha" />, document.querySelector('#root'))
// TinyReact.render(vdom, document.querySelector('#root'))

// TinyReact.render(vdom, root)

// setTimeout(() => {
//   TinyReact.render(<Hello name="蓬勃" age={40} />, root)
// }, 2000);

// console.log(vdom)